<div class="demo-container">
    <!--kylin-camera 三个必要参数
    1- cameraGroupList 多个摄像头组
    2- cameraGroupListChange 选中的摄像头组发生变化的EventEmitter对象
    3- downloadUrl 海康视频插件在服务器上的地址，用于尚未安装时下载插件-->
    <kylin-camera (loadingEmit)="changeLoading($event)"
                  #kylinCamera
                  [cameraGroupList]="selectedGroups"
                  downloadUrl="http://xxx.xx.xx:port/api/device/download">
        <!-- 选择摄像头组的下拉列表-->
        <!--<div class="camera-group-selector" #groupSelector>
            <nz-select style="width: 1000px;"
                       class="dropdown-content"
                       nzShowSearch
                       nzAllowClear
                       nzPlaceHolder="请选择需要观察的摄像头组"
                       [(ngModel)]="selectedGroups"
                       (ngModelChange)="refreshStatus()"
                       [nzMaxMultipleCount]="3"
                       nzMode="multiple">
                <nz-option *ngFor="let cameraGroup of cameraGroupList" [nzLabel]="cameraGroup.label" [nzValue]="cameraGroup.value"></nz-option>
            </nz-select>
        </div>-->
        <div class="camera-group-selector" #groupSelector>
            <input nz-input placeholder="请选择需要观察的摄像头组"
                   readonly
                   (click)="dropdown.style.display = dropdown.style.display === 'none'? 'block' : 'none'"
                   [(ngModel)]="selectedGroupsStr">
            <!-- dropdown-content 这个类名是必须的，为了保证下拉框出现在视频之上需要与 shared.camera.ts中 $(document.body).bind 内的选择器对应-->
            <div class="dropdown-content" #dropdown [style.display]="'none'">
                <nz-table [nzLoading]="loading">
                    <tbody>
                    <tr *ngFor="let item of cameraGroupList">
                        <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus(item)"></td>
                        <td>{{item.ip}}</td>
                        <td>{{item.port}}</td>
                        <td>{{item.username}}</td>
                        <td>{{item.password}}</td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
        <!-- 回放日期选择器,类名必须包含下例中的类名-->
        <nz-date-picker class="kylin-start-date" [(ngModel)]="startDate"
                        (ngModelChange)="kylinCamera.startDateChange($event)" nzShowTime></nz-date-picker>
        <nz-date-picker class="kylin-end-date" [(ngModel)]="endDate" (ngModelChange)="kylinCamera.endDateChange($event)"
                        nzShowTime></nz-date-picker>
    </kylin-camera>
</div>
